<!--第一天  6-1、ref获取dom-->
<script setup lang="ts">
import {onMounted, ref} from "vue";
import SonCom from "@/components/sonCom.vue";

let box=ref()
console.log(box)
// console.log(box.value)   //undefined


// vue3中onMounted是第一个能获取dom元素的生命周期
onMounted(()=>{
  console.log(box.value)    //能获取div
})

let son=ref()
function getDom(){
  console.log(box.value)     //能获取div
  console.log(son.value)
  console.log(son.value.msg)   //undefined 获取不到，当在子组件中写上defineExpose({msg})后，才能获取到子组件msg中的内容
  son.value.getMsg()
}
</script>

<template>
ref获取dom
  <div ref="box">这是元素</div>
  <son-com ref="son"></son-com>
  <button @click="getDom">获取元素</button>
</template>

<style scoped>

</style>
